<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <!-- 引入axios和vue的框架文件 -->
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <style>
        /* 整体页面背景和基本样式 */
        body {
            font-family: 'Orbitron', sans-serif;
            background: radial-gradient(circle at center, #000000, #111111);
            margin: 0;
            padding: 0;
            color: #ccc;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            overflow: hidden;
        }

        /* 外层容器样式 */
        div {
            background-color: rgba(20, 20, 20, 0.8);
            border-radius: 20px;
            box-shadow: 0 0 30px rgba(0, 255, 255, 0.5), 0 0 60px rgba(0, 255, 255, 0.3) inset;
            padding: 30px;
            width: 400px;
            animation: fadeInOut 1s ease infinite alternate;
        }

        /* 闪烁动画关键帧 */
        @keyframes fadeInOut {
            from {
                opacity: 0.8;
            }

            to {
                opacity: 1;
            }
        }

        /* 标题样式 */
        h1 {
            color: #00FFFF;
            font-size: 32px;
            text-align: center;
            text-shadow: 0 0 15px rgba(0, 255, 255, 0.8);
            animation: titleGlow 2s infinite alternate;
        }

        /* 标题闪烁动画关键帧 */
        @keyframes titleGlow {
            from {
                text-shadow: 0 0 15px rgba(0, 255, 255, 0.8);
            }

            to {
                text-shadow: 0 0 30px rgba(0, 255, 255, 1);
            }
        }

        /* 输入框样式 */
        input[type="text"] {
            width: 100%;
            height: 40px;
            margin-bottom: 20px;
            border: 1px solid rgba(0, 255, 255, 0.3);
            border-radius: 10px;
            padding: 10px;
            background-color: rgba(0, 0, 0, 0.3);
            color: #fff;
            transition: border-color 0.3s ease;
        }

        input[type="text"]:focus {
            border-color: #00FFFF;
            outline: none;
        }

        /* 注册按钮样式 */
        input[type="button"] {
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 10px;
            padding: 14px 30px;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.2s ease;
            position: relative;
            overflow: hidden;
            animation: buttonGlow 2.5s infinite;
        }

        /* 按钮发光动画关键帧 */
        @keyframes buttonGlow {
            0% {
                box-shadow: 0 0 15px rgba(0, 255, 255, 0.6);
            }

            50% {
                box-shadow: 0 0 30px rgba(0, 255, 255, 0.8);
            }

            100% {
                box-shadow: 0 0 15px rgba(0, 255, 255, 0.6);
            }
        }

        input[type="button"]:hover {
            background-color: #0056b3;
            transform: scale(1.05);
        }

        input[type="button"]:active::after {
            content: "";
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background-color: rgba(0, 255, 255, 0.3);
            border-radius: 50%;
            opacity: 0;
            animation: buttonRipple 0.8s ease-out;
        }

        /* 点击发光动画关键帧 */
        @keyframes buttonRipple {
            0% {
                transform: scale(0);
                opacity: 1;
            }

            100% {
                transform: scale(1);
                opacity: 0;
            }
        }
    </style>
</head>

<body>
    <div>
        <h1>注册页面</h1>
        <input type="text" placeholder="用户名" v-model="user.username">
        <input type="text" placeholder="密码" v-model="user.password">
        <input type="text" placeholder="昵称" v-model="user.nickname">
        <input type="button" value="注册" @click="reg()">
    </div>
    <script>
        let v = new Vue({
            el: "body>div",
            data: {
                user: { username: "", password: "", nickname: "" }
            },
            methods: {
                reg() {
                    // 简单的前端验证，可根据需求加强
                    if (!v.user.username ||!v.user.password ||!v.user.nickname) {
                        alert("用户名、密码和昵称都不能为空");
                        return;
                    }
                    // 发出注册请求
                    axios.post("/v1/users/reg", v.user).then(function (response) {
                        if (response.data == 1) {
                            alert("注册成功");
                            location.href = "/";
                        } else {
                            alert("用户名已存在");
                        }
                    })
                }
            }
        })
    </script>
</body>

</html>